<template>
  <div class="home">
    <transition name="fade" mode="out-in">

      <dv-border-box-10>
        <div class="naca">
          <div class="index-header" style="margin-top: 5px">
            <div>
              <dv-decoration-10 style="width: 450px; height: 1px; margin-bottom: 45px" />
              <dv-decoration-8 style="width: 180px; height: 50px" :color="['#568aea', '#000000']" />
              <div style="
                  width: 170px;
                  color: #eeecec;
                  font-size: 17px;
                  letter-spacing: 0.1em;
                  padding: 0 15px;
                  font-weight: bold;
                ">
                医疗数据可视化平台
              </div>
              <dv-decoration-8 :reverse="true" style="width: 180px; height: 50px" :color="['#568aea', '#000000']" />
              <dv-decoration-10 style="
                  width: 450px;
                  height: 1px;
                  transform: rotateY(180deg);
                  margin-bottom: 45px;
                " />
            </div>
            <dv-decoration-5 style="width: 10%; height: 20px" :color="['#568aea', '#000000']" />
          </div>

          <div class="index-content">
            <div class="left">
              <div class="left-1" style="">

                <dv-border-box-12>
                  <div style="padding: 5px">
                    <div class="title" style="margin-top: 5px">
                      各年龄段患病数
                    </div>

                    <div ref="firstMain" class="first" style="width: 100%; height: 140px"></div>
                  </div>
                </dv-border-box-12>
                <dv-border-box-8 :reverse="true">
                  <div style="padding: 5px;padding-bottom:5px">
                    <div class="title" style="margin-top: 1px">疾病类型分布</div>
                    <dv-capsule-chart id="capsuleChart" style="width: 100%; height: 200px" />
                  </div>
                </dv-border-box-8>

                <dv-border-box-3>
                  <div style="padding: 15px">
                    <div class="title" style="margin-top: 5px">病例列表</div>
                    <!-- <div ref="timeZhou" style="width: 100%; height: 350px"></div> -->
                    <div class="row_list" style="">
                      <ul class="cases_list" style="width: 100%; height: 194px; overflow: auto">
                        <!-- <li style="font-size: 15px;">
                            <div>编号</div>
                            <div>求诊类型</div>
                            <div>性别</div>
                            <div>年龄</div>
                            <div>身高</div>
                            <div>体重</div>
                            <div>患病时长</div>
                        </li> -->
                        <!-- 自动轮播表格 http://datav.jiaminghi.com/guide/scrollBoard.html#config%E5%B1%9E%E6%80%A7 -->
                        <dv-scroll-board :config="tableData" style="width:500px;height: 185px;margin-left: 10px;" />



                      </ul>
                    </div>
                  </div>
                </dv-border-box-3>



              </div>
            </div>
            <div class="cents">
              <div class="above">
                <div class="aboveOne">
                  <div style="padding: 10px">
                    <div class="title" style="margin-bottom: 8px;">疾病基础数据</div>
                    <div style="
                        display: flex;
                        flex-direction: column;
                        width: 100%;
                        height: 120px;
                        color: #eeecec;
                      ">
                      <div style="display: flex; flex: 1">
                        <dv-decoration-11 style="height:60px;text-align: center;">
                          <div style="flex: 1;">数据量:{{ centerData.maxNum }}</div>
                        </dv-decoration-11>
                        <dv-decoration-11 style="height:60px;text-align: center;">
                          <div style="flex: 1;">最多疾病类型:{{ centerData.maxType }}</div>
                        </dv-decoration-11>
                        <dv-decoration-11 style="height:60px;text-align: center;">
                          <div style="flex: 1;">求诊最多科室:{{ centerData.maxDepartment }}</div>
                        </dv-decoration-11>



                      </div>
                      <div style="display: flex; flex: 1">
                        <dv-decoration-11 style="height:60px;text-align: center;">
                          <div style="flex: 1;">最大患者年龄:{{ centerData.maxAge }}</div>
                        </dv-decoration-11>
                        <dv-decoration-11 style="height:60px;text-align: center;">
                          <div style="flex: 1;">最小患者年龄:{{ centerData.minAge }}</div>
                        </dv-decoration-11>
                        <dv-decoration-11 style="height:60px;text-align: center;">
                          <div style="flex: 1;">热门医院:{{ centerData.maxHospital }}</div>
                        </dv-decoration-11>


                      </div>
                    </div>
                  </div>
                  <div style="padding: 10px ;margin-top: 20px;">
                    <div class="title" style="margin-top: -15px">
                      男女性别患病对比
                    </div>
                    <div class="content">
                      <div style="width: 450px; height: 90px; display: flex; justify-content: space-between;">
                        <dv-active-ring-chart :config="Maleratio" style="width:150px;height:150px" />
                        <div style="margin-top: 10px;">
                          <dv-water-level-pond :config="ratio" style="width:100px;height:100px" />
                        </div>
                        <dv-active-ring-chart :config="Femaleratio" style="width:150px;height:150px" />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="aboveTwo">
                  <dv-border-box-9 :color="['#091e3a', '#2f80ed', '#2d9ee0']">
                    <div style="padding: 10px">
                      <div class="title" style="margin-top: 5px">
                        医院科室环形图
                      </div>
                      <div id="secondMian" style="width: 100%; height: 110px"></div>
                    </div>
                  </dv-border-box-9>
                  <dv-border-box-1>
                    <div style="padding: 5px">
                      <div class="title" style="margin-top: 5px">
                        疾病关键词云图
                      </div>
                      <div ref="thirdMain" style="width: 400px; height: 150px">

                      </div>
                    </div>
                  </dv-border-box-1>

                </div>
              </div>
              <div class="below">

                <dv-border-box-13>
                  <div style="padding: 7px;margin-top: 30px;">
                    <div class="title" style="margin-top: 5px">
                      患病身高体重平均数
                    </div>
                    <div ref="lastMain" style="width: 100%; height: 240px; margin-top: 25px"></div>
                  </div>
                </dv-border-box-13>

              </div>
            </div>
          </div>
        </div>
      </dv-border-box-10>
    </transition>
  </div>
</template>




<script>
import $ from "jquery";
import LeftTop from "@/components/LeftTop.vue";
import * as echarts from 'echarts';



function formatter(number) {
  const numbers = number.toString().split("").reverse();
  const segs = [];

  while (numbers.length) segs.push(numbers.splice(0, 3).join(""));

  return segs.join(",").split("").reverse().join("");
}
export default {
  name: "Index",



  data() {
    return {
      // pieData: [],
      // 饼图模拟数据
      pieData: [
        { value: 1048, name: '直接访问' },
        { value: 735, name: '邮件营销' },
        { value: 580, name: '联盟广告' },
        { value: 484, name: '视频广告' },
        { value: 300, name: '搜索引擎' }
      ],
      // 表格模拟数据
      tableData: {
        headerBGC: false,
        header: ['编号', '性别', '年龄', '身高', '体重', '患病时长'],
        data: [
          ['1', '男', '20', '170', '70', '1年'],
          ['2', '女', '25', '165', '65', '2年'],
          ['3', '男', '30', '180', '80', '3年'],
          ['4', '女', '35', '175', '75', '4年'],
          ['5', '男', '20', '170', '70', '1年'],
          ['6', '女', '25', '165', '65', '2年'],
          ['7', '男', '30', '180', '80', '3年'],
          ['8', '女', '35', '175', '75', '4年'],
          ['9', '男', '20', '170', '70', '1年'],
          ['10', '女', '25', '165', '65', '2年'],
          ['11', '男', '30', '180', '80', '3年'],
          ['12', '女', '35', '175', '75', '4年'],
        ]
      },

      //疾病基础数据
      centerData: {
        maxNum: "8800",
        maxType: "流感",
        maxDepartment: "骨科",
        maxHospital: "郑州一附院",
        minAge: "3岁",
        maxAge: "93岁",

      }
      ,
      //性别比例
      Maleratio: {
        radius: '52%',
        activeRadius: '60%',
        digitalFlopStyle: {
          fontSize: 20
        },
        data: [
          {
            name: '感冒',
            value: 55
          },
          {
            name: '近视',
            value: 120
          },
          {
            name: '骨折',
            value: 78
          },
          {
            name: '胃炎',
            value: 66
          },
          {
            name: '高血压',
            value: 80
          },
          {
            name: '劲椎病',
            value: 100
          },
          {
            name: '腰间盘突出',
            value: 130
          }
        ]
      },
      ratio: {
        data: [66, 45],
        shape: 'roundRect'

      },
      Femaleratio: {
        radius: '52%',
        activeRadius: '60%',
        digitalFlopStyle: {
          fontSize: 20
        },
        data: [
          {
            name: '感冒',
            value: 100
          },
          {
            name: '近视',
            value: 100
          },
          {
            name: '骨折',
            value: 78
          },
          {
            name: '胃炎',
            value: 166
          },
          {
            name: '高血压',
            value: 80
          },
          {
            name: '劲椎病',
            value: 100
          },
          {
            name: '腰间盘突出',
            value: 100
          }
        ]
      },

      // 科室圆环图数据
      circleData: [
        {
          name: '骨科',
          value: 90
        },
        {
          name: '神经科',
          value: 50
        },
        {
          name: '眼科',
          value: 70
        },
        {
          name: '皮肤科',
          value: 40
        },
        {
          name: '中医科',
          value: 20
        }
      ],

      // 关键词云图数据
      wordData: [
        {
          name: "劲椎病",
          value: 100
        }, {
          name: "高血压",
          value: 50
        }, {
          name: "流感",
          value: 40
        }, {
          name: "腰间盘突出",
          value: 70
        }, {
          name: "骨折",
          value: 10
        }
      ],


      //柱状图数据
      histogramData: {
        xTitle: ['高血压', '颈椎病', '骨折', '腰间盘突出', '胃炎', '流感', '心肌梗塞', '抑郁症', '鼻炎', '结石', '青光眼'],

        heightData: [150, 180, 150, 170, 188, 160, 170, 181, 150, 160, 170],
        weightData: [100, 80, 120, 90, 110, 130, 190, 150, 80, 100, 90],

      },



      // 获取数据
      // getData() {
      // },

    };
  },


  methods: {
    setPieData() {
      $(document).ready(() => {
        var chartDom = this.$refs.firstMain;
        var myChart = echarts.init(chartDom);
        var option;
        option = {
          tooltip: {
            trigger: 'item',
          },

          legend: {
            left: 'left',
            top: 'center',
            orient: 'vertical',
            textStyle: {
              color: '#ffffff' // 设置图例文字颜色为白色
            },
            itemWidth: 10, // 可选：设置图例图标的宽度
            itemHeight: 10, // 可选：设置图例图标的高度
            itemGap: 10, // 可选：设置图例项之间的间隔
            icon: 'circle' // 可选：设置图例图标为圆形
          },
          grid: {
            top: '1%',
            left: '6%',
            right: '5%',
            bottom: '1%',
            containLabel: true
          },

          series: [

            {
              name: '患病人数',
              type: 'pie',
              radius: [20, 60],
              center: ['55%', '50%'],
              roseType: 'area',
              itemStyle: {
                borderRadius: 5
              },
              label: {
                show: true,

                textStyle: {
                  color: '#ffffff' // 设置延伸线文字颜色为白色
                }
              },
              data: [
                { value: 700, name: '70~80岁', },
                { value: 600, name: '80~90岁' },
                { value: 500, name: '50~60岁' },
                { value: 435, name: '0~15岁' },
                { value: 484, name: '40~50岁' },
                { value: 400, name: '60~70岁' },
                { value: 380, name: '16~25岁' },
                { value: 350, name: '26~40岁' },
              ]
            }
          ]
        };
        option && myChart.setOption(option);
        function focusSlice(myChart, index) {
          // 移除所有扇区的焦点效果
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0
          });
          // 设置当前扇区为焦点
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: index
          });
        }
        // 初始化焦点
        this.currentSliceIndex = 0;
        focusSlice(myChart, this.currentSliceIndex);
        // 设置定时器，每隔1.5秒切换一次
        setInterval(() => {
          this.currentSliceIndex = (this.currentSliceIndex + 1) % option.series[0].data.length;
          focusSlice(myChart, this.currentSliceIndex);
        }, 1500);
      });
    },


    setStripData() {
      $(document).ready(() => {
        var chartDom = document.getElementById('capsuleChart');
        var myChart = echarts.init(chartDom);
        var option;


        option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // Use axis to trigger tooltip
              type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
          },
          legend: { show: false },

          grid: {
            top: '1%',
            left: '6%',
            right: '5%',
            bottom: '1%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: '#ffffff' // 设置x轴文字颜色为白色
              }
            }

          },
          yAxis: {
            type: 'category',
            data: ['心肌梗塞', '劲椎病', '高血压', '胃炎', '骨折', '近视', '感冒'],
            axisLabel: {
              textStyle: {
                color: '#ffffff' // 设置y轴文字颜色为白色
              }
            }
          },
          series: [
            {
              name: '0~15岁',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [320, 302, 301, 334, 390, 330, 320]

            },
            {
              name: '16~30岁',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [120, 132, 101, 134, 190, 230, 210]
              , textStyle: {
                color: '#ffffff'
              }
            },
            {
              name: '36~50岁',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [220, 182, 191, 234, 290, 330, 310]
              , textStyle: {
                color: '#ffffff'
              }
            },
            {
              name: '50~70岁',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [150, 212, 201, 154, 190, 330, 410]
              , textStyle: {
                color: '#ffffff'
              }
            },
            {
              name: '70~80岁',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [520, 532, 601, 634, 590, 730, 820]
              , textStyle: {
                color: '#ffffff'
              }
            }, {
              name: '80~100岁',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [150, 80, 160, 130, 220, 70, 200]

            }
          ]
        };


        option && myChart.setOption(option);
      })


    },


    getseriesData() {

      const series = [];
      this.circleData.forEach((item, index) => {
        series.push({
          name: item.name,
          type: "pie",
          clockWise: true,
          hoverAnimation: true,
          radius: [100 - index * 15 + "%", 90 - index * 15 + "%"],
          avoidLabelOverlap: true,
          emphasis: {
            label: {
              show: true,
            }
          },
          data: [{
            value: item.value * 0.01,
            name: item.name,
            label: {
              show: false,
            },
            tooltip: {
              show: true,
            },
            hoverAnimation: false,
          }, {
            value: 1 - item.value * 0.01,
            name: item.name,
            label: {
              show: false,
            },
            itemStyle: {
              color: "rgba(0, 0, 0, 0)", //隐藏的半圆
              borderWidth: 0,
            },
            tooltip: {
              show: false,
            },
            hoverAnimation: false,
          }]
        })

      });
      return series;
    },
    setCircleData() {
      $(document).ready(() => {
        var myChart2 = document.getElementById("secondMian");
        var myChart = echarts.init(myChart2);
        var option;
        option = {
          tooltip: {
            show: false,
            trigger: 'item'
          },
          legend: {
            show: true,
            top: '5%',
            left: 'left',
            top: 'center',
            orient: 'vertical',
            textStyle: {
              color: '#ffffff' // 设置图例文字颜色为白色
            },
            itemWidth: 10, // 可选：设置图例图标的宽度
            itemHeight: 10, // 可选：设置图例图标的高度
            itemGap: 10, // 可选：设置图例项之间的间隔
            icon: 'circle'
          },
          grid: {
            top: '1%',
            left: '6%',
            right: '5%',
            bottom: '1%',
            containLabel: true
          },
          series: this.getseriesData()

        };


        option && myChart.setOption(option);


      })
    },



    //词云图
    setWordData() {
      $(document).ready(() => {
        var chartDom = this.$refs.thirdMain;
        var myChart = echarts.init(chartDom);

        let option = {
          series: [{
            type: 'wordCloud',
            sizeRange: [15, 50],
            rotationRange: [0, 20],
            rotationStep: 45,
            gridSize: 8,
            shape: 'pentagon',
            width: '100%',
            height: '100%',
            textStyle: {
              color: function () {
                return 'rgba(' + [
                  Math.round(Math.random() * 200),
                  Math.round(Math.random() * 200),
                  Math.round(Math.random() * 200),
                  Math.round(0.5 + Math.random()),
                ].join(',') + ')';
              },
            },
            data: this.wordData
          }]
        }

        option && myChart.setOption(option);

      });
    },


    // 身高柱状图
    setHistogramData() {
      $(document).ready(() => {
        var chartDom = this.$refs.lastMain;
        var myChart = echarts.init(chartDom);
        var option;
        option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#a0a7e6'
              }
            }
          },
          legend: {
            textStyle: {
              color: '#ffffff'
            },
            left: 'left',
            top: 'top',

          },
          grid: {
            top: '13%',
            left: '6%',
            right: '5%',
            bottom: '1%',
            containLabel: true
          },

          dataZoom: {
            show: false,
            start: 15,
            end: 100,
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: true,
              data: this.histogramData.xTitle,
              axisLabel: {
                textStyle: {
                  color: '#ffffff'
                }
              }
            },
          ],
          yAxis: [
            {
              type: 'value',
              scale: true,
              max: 200,
              min: 0,
              boundaryGap: [0.2, 0.2],
              axisLabel: {
                textStyle: {
                  color: '#ffffff'
                }
              }
            }
          ],
          series: [
            {
              name: '平均身高',
              type: 'bar',
              // xAxisIndex: 1,
              // yAxisIndex: 1,
              data: this.histogramData.heightData,
              itemStyle: {
                color: {
                  type: 'linear', // 线性渐变
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0, color: '#184e68' // 渐变起始颜色
                    },
                    {
                      offset: 1, color: '#57ca85' // 渐变结束颜色
                    }
                  ]
                }
              },

            },
            {
              name: '平均体重',
              type: 'line',
              data: this.histogramData.weightData,
              itemStyle: {
                color: {
                  type: 'linear', // 线性渐变
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0, color: '#42e695' // 渐变起始颜色
                    },
                    {
                      offset: 1, color: '#3bb2b8' // 渐变结束颜色
                    }
                  ]
                }
              }
            }
          ]
        };

        // 设置定时器动态更新数据
        setInterval(function () {
          // 把 this.histogramData.heightData 数组中的第一个元素删除，并添加到最后一个
          const removedHeight = this.histogramData.heightData.shift();
          this.histogramData.heightData.push(removedHeight);

          // 同样处理 weightData 和 xTitle
          const removedWeight = this.histogramData.weightData.shift();
          this.histogramData.weightData.push(removedWeight);

          const removedXTitle = this.histogramData.xTitle.shift();
          this.histogramData.xTitle.push(removedXTitle);

          myChart.setOption({
            xAxis: [
              {
                data: this.histogramData.xTitle
              },
            ],
            series: [
              {
                data: this.histogramData.heightData
              },
              {
                data: this.histogramData.weightData
              }
            ]
          });
        }.bind(this), 2100);
        option && myChart.setOption(option);
      });

    },









  },
  async created() {

    $(document).ready(async () => {
      this.setPieData();
      this.setStripData();
      this.setWordData();
      this.setCircleData();
      this.setHistogramData();
    })
  },
  // 钩子函数
  mounted() {
    // 发出请求
    // const res = await this.$http.get("/getHomeData");
    // /console.log(res);
    //接收后端的数据
    this.pieData = res.data.pieData;
    this.stripData = res.data.stripData;
    this.tableData = res.data.tableData;
    // 获取基础数据
    this.centerData.maxNum = res.data.centerData.maxNum;
    this.centerData.maxType = res.data.centerData.maxType;
    this.centerData.maxDepartment = res.data.centerData.maxDepartment;
    this.centerData.maxHospital = res.data.centerData.maxHospital;
    this.centerData.maxAge = res.data.centerData.maxAge;
    this.centerData.minAge = res.data.centerData.minAge;
    // 科室环形图数据
    this.circleData = res.data.circleData;
    //词云图  
    this.wordData = res.data.wordData;

  },

  components: {
    LeftTop,
  },
};
</script>

<style lang="less" scoped>
.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.cent-1-content {
  padding: 20px;
  display: flex;
}

.right-content {
  margin-left: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.right-content div {
  display: flex;
  font-size: 15px;
  align-items: center;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.cents {
  display: flex;
  flex-direction: column;
}

.above {
  display: flex;
}

.aboveOne {
  display: flex;
  flex-direction: column;
}

.aboveTwo {
  display: flex;
  flex-direction: column;
}

.cent {
  width: 850px;
  height: 30px;
}

.cent-1 {
  margin: 10px;
  color: aliceblue;
  width: 500px;
  height: 220px;
  /* background-color: rgb(26, 26, 133); */
}

.left {
  display: flex;
  flex-direction: column;
}

.left-1 {
  margin: 15px;
  color: aliceblue;
  width: 550px;
  display: flex;
  flex-direction: column;
}

.left-2 {
  margin: 15px;
  color: aliceblue;
  width: 530px;
  display: flex;
  flex-direction: column;
}

.naca {
  // padding: 35px 15px 0 15px;
  box-sizing: border-box;
  width: 100%;
  // height: 750px;
  display: flex;
  flex-direction: column;
}

.naca .index-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.naca .index-header div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.naca .index-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg {
  width: 100%;
  height: 45rem;
  background-color: black;
  position: relative;
}

.title {
  color: #3f96a5;
  font-size: 18px;
  margin-top: -20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: bold;
}

.content {
  display: flex;
  align-items: center;
}

.content-word {
  width: 140px;
  height: 130px;
  background: #11193e;
  border-radius: 40px;
  border: 1px solid #3d3d3d;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content-word-item {
  margin-left: 19px;
  margin-bottom: 10px;

  img {
    width: 20px;
    height: 20px;
  }
}

.content-word-item-title {
  font-size: 18px;
}

.content-word-item-content {
  margin-top: 5px;

  display: flex;
  align-items: center;
}

.row_list {
  list-style: none;
}

.cases_list::-webkit-scrollbar {
  display: none;
}

.cases_list li {
  display: grid;
  -ms-grid-columns: 30px 110px 60px 60px 60px 50px 100px;
  grid-template-columns: 30px 110px 60px 60px 60px 50px 100px;
  cursor: pointer;
  margin-left: 23px;
  text-align: center;
  line-height: 30px;
  color: rgb(238, 236, 236);
}

.list_time {
  height: 30px;
  overflow: auto;
}

.list_time::-webkit-scrollbar {
  display: none;
}

// 添加功能
// 实现焦点效果
.slice-focus {
  transform: scale(1.1);
  z-index: 1;
}
</style>